<template>
  <div>
    <div class="imgwarin_cont">
      <!-- 下拉选项框 -->
      <div class="hader_selete">
        <el-select
          v-model="formInline.recipe"
          @change="onclickcheng"
          style="width: 120px; height: 40px"
          placeholder="机种选项"
        >
          <el-option
            v-for="item in RecipeList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>

        <el-select
          v-model="formInline.line"
          @change="onclickcheng"
          style="width: 120px; height: 40px"
          placeholder="线体选项"
        >
          <el-option
            v-for="item in lineList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>

        <el-select
          v-model="formInline.errorcode"
          @change="onclickcheng"
          style="width: 120px; height: 40px"
          placeholder="缺陷选项"
        >
          <el-option
            v-for="item in defectlist"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </div>

      <div class="imgwargin_hader">
        <!-- 线图 -->
        <div id="my_nerwter"></div>

        <!-- 照片 -->
        <div class="imgwargin_cont_img">
          <div v-for="(item, index) in urlimg" :key="index">
            <img :src="item.imagePath" alt="" v-show="item.isshow" />
          </div>
        </div>
      </div>

      <div class="imgwragin_top">
        <!-- 表格    :span-method="objectSpanMethod" -->
        <div class="imgwargin_table">
          <div>
            <el-table
              :data="tableData.slice(1)"
              border
              :span-method="objectSpanMethod"
            >
              <el-table-column prop="" label="recipe">
                <!-- <template scope="scope"> -->
                <span v-for="(item, index) in recipe" :key="index">{{
                  item
                }}</span>
                <!-- </template> -->
              </el-table-column>
              <el-table-column prop="line" label="Line"></el-table-column>
              <el-table-column
                prop="BlackDot"
                label="BlackDot"
              ></el-table-column>
              <el-table-column prop="Block" label="Block"></el-table-column>
              <el-table-column
                prop="BrightDot"
                label="BrightDot"
              ></el-table-column>
              <el-table-column prop="Line" label="Line"></el-table-column>
              <el-table-column prop="Mura" label="Mura"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // isshow: false,
      lineList: [],
      RecipeList: [],
      defectlist: [],
      statmenlist: [],
      recipe: [],
      linelist: [],
      items: [],
      urlimg: [],
      line1: [],
      formInline: {
        recipe: "",
        line: "",
        errorcode: "",
      },
      interequest: null,
      baokelist: [],
      columnIndex: ["颜色", "内存"],
      tableData: [],
    };
  },
  created() {},
  mounted() {
    this.getimgwragin();
    // this.gettablelist();
  },
  methods: {
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.name === arr[index - 1].name) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    onclickcheng() {
      if (this.formInline.recipe == "") {
        this.$alert("机种不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.line == "") {
        this.$alert("线体不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.errorcode == "") {
        this.$alert("缺陷不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        var chart;
        chart = this.$echarts.init(document.getElementById("my_nerwter"));
        this.getimgwrarlist();
        setTimeout(() => {
          this.nowechrts();
          this.gettablelist();
        },4000);
        chart.dispose();
        // clearInterval(this.interequest);
      }
    },

    //  获取 折线图 照片 数据
    getimgwrarlist() {
      this.ajax({
        url: "imgwargin",
        method: "GET",
        params: {
          data: this.formInline,
        },
      }).then((res) => {
        var url = "";
         console.log(res.data);
        if (res.data.code == 200) {
          this.tableData = [];
          this.urlimg = [];
          this.items = res.data.data.data;
          // console.log('1--------------------',this.items)
          this.items.forEach((element) => {
            element.points.forEach((ele) => {
              if (element.points[element.points.length - 1]) {
                element.points[element.points.length - 1].isshow = true;
              } else {
                ele.isshow = false;
              }
              // console.log(ele.imagePath[0])
              url = ele.imagePath.replace("D:/share/denseWarn", "http://10.95.97.239:8080");
              ele.imagePath = url;
            });
          });
          console.log('----------------------',this.items)
          this.items.map((item) => {
            let cont = item.points[item.points.length - 1];
            this.urlimg.push(cont);
          });
        }
      });
    },

    // 进入页面获取数据
    getimgwragin() {
      let a = {};
      this.ajax({
        url: "airplane",
        method: "GET",
        params: {
          data: a,
        },
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 200) {
          this.lineList = res.data.data.line;
          this.RecipeList = res.data.data.recipe;
          this.defectlist = res.data.data.defect;
          if (this.RecipeList) {
            // console.log("机种线体数据回来-----先执行 1");
            this.$message({
              message: "请选择机种，线体",
              type: "success",
            });
          } else {
            this.$message({
              message: "数据未能返回，请刷新浏览器",
              type: "warning",
            });
          }
        }
      });
    },




    //获取列表数据
    gettablelist() {
      // console.log("1111=-----------------------", this.formInline.recipe);
      if (this.formInline.recipe == "VR2-1-25") {
         console.log('暂无数据')
      } else {
        var a = "";
        this.ajax({
          url: "Warningstatements",
          method: "GET",
          params: {
            data: a,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.statmenlist = res.data.data.data;
            console.log("---------------------列表数据", this.statmenlist);
            this.tableData = [];
            this.recipe = [];
            let objlist = [];
            let conobjtitle = [];
            let contobj1 = [];
            let contobj2 = [];
            let contobj3 = [];
            let contobj4 = [];
            conobjtitle.push("line");
            for (let a = 0; a < this.statmenlist.length; a++) {
              this.recipe.push(this.statmenlist[a].recipe);
              this.linelist = this.statmenlist[a].recipeData;
              for (let i = 0; i < this.linelist.length; i++) {
                if (this.linelist[i].line == "line1") {
                  contobj1.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj1.push(this.linelist[i].lineData[j].val);
                    conobjtitle.push(this.linelist[i].lineData[j].type);
                  }
                } else if (this.linelist[i].line == "line2") {
                  contobj2.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj2.push(this.linelist[i].lineData[j].val);
                  }
                } else if (this.linelist[i].line == "line3") {
                  contobj3.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj3.push(this.linelist[i].lineData[j].val);
                  }
                } else if (this.linelist[i].line == "line4") {
                  contobj4.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj4.push(this.linelist[i].lineData[j].val);
                  }
                }
              }
              objlist.push(conobjtitle, contobj1, contobj2, contobj3, contobj4);
            }

            for (let i = 0; i < objlist.length; i++) {
              let obj = {
                line: objlist[i][0],
                BlackDot: objlist[i][1],
                Block: objlist[i][2],
                BrightDot: objlist[i][3],
                Line: objlist[i][4],
                Mura: objlist[i][5],
              };
              this.tableData.push(obj);
            }
            // console.log(this.tableData)
          }
        });
      }
    },

    nowechrts() {
      let my_chers = this.$echarts.init(document.getElementById("my_nerwter"));
      // console.log("---------实例中获取数据-", this.items);
      var url = "";
      // let tabalelist = [];
      let urlcoent = [];
      var listtype = [];
      let BlackDotlist = [];
      let listtime = [];
      let biockdotval = [];
      let timedata = [];
      let name = "";
      let BlackDotval = [];
      let lower = "";
      let upper = "";
      let lowerlist = [];
      let upperlist = [];
      console.log("222222222222222222222222------------------", this.items);
      for (let i = 0; i < this.items.length; i++) {
        lower = this.items[i].lowerLimit;
        upper = this.items[i].upperLimit;
        listtype.push(this.items[i].type);
        name = this.items[i].type;
        BlackDotlist = this.items[i].points;
      }

      for (let i = 1; i < 20; i++) {
        lowerlist.push(lower);
      }
      for (let i = 1; i < 20; i++) {
        upperlist.push(upper);
      }
      // console.log("二次请求走到这里了",BlackDotlist);
      for (let i = 0; i < BlackDotlist.length; i++) {
        listtime.push(BlackDotlist[i].time);
      }

      for (var i = 0; i < BlackDotlist.length; i++) {
        BlackDotval.push(BlackDotlist[i].val);
      }

      var option = {
        title: {
          text: "连续预警实时统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: listtype,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: listtime,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: name,
            type: "line",
            // stack: "总量",
            data: BlackDotval,
            itemStyle: {
              color: "#FFA500",
            },
          },

          {
            name: "HA",
            type: "line",
            data: upperlist,
            markLine: {
              symbol: "none",
              label: {
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: `高预警线${upper}`,
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#DC143C",
                  },
                  yAxis: upper, //警戒线在y轴的坐标
                },
              ],
            },
          },
          {
            name: "UP",
            type: "line",
            data: lowerlist,
            markLine: {
              symbol: "none",
              label: {
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: `${lower}`,
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#DC143C",
                  },
                  yAxis: lower, //警戒线在y轴的坐标
                },
              ],
            },
          },
        ],
      };

      let urllist = [];
      my_chers.on("mousemove", (params) => {
        this.urlimg = [];
        urllist = [];
        // console.log("鼠标移入",BlackDotlist);
        BlackDotlist.forEach((ele) => {
          if (params.value == ele.val) {
            ele.isshow = true;
            //  console.log(ele);
            urllist.push(ele);
          }
        });
        this.urlimg = [urllist[0]];
      });

      my_chers.setOption(option, true);
      this.interequest = setInterval(() => {
        BlackDotval.shift();
        listtime.shift();

        my_chers.setOption(option, true);

        this.ajax({
          url: "imgwargin",
          method: "GET",
          params: {
            data: this.formInline,
          },
        }).then((res) => {
          // console.log(res.data);
          if (res.data.code == 200) {
            // tabalelist = [];
            urlcoent = [];
            this.baokelist = res.data.data.data;

            for (let i = 0; i < this.baokelist.length; i++) {
              BlackDotlist = this.baokelist[i].points;
            }

            for (var i = 0; i < BlackDotlist.length; i++) {
              timedata.push(BlackDotlist[i].time);
              biockdotval.push(BlackDotlist[i].val);
            }

            if (biockdotval.length == BlackDotval.length) {
              listtime = timedata;
              BlackDotval = biockdotval;
            } else {
              let a = biockdotval.pop();
              let b = timedata.pop();
              BlackDotval.push(a);
              listtime.push(b);
            }
            this.baokelist.forEach((element) => {
              element.points.forEach((ele) => {
                if (element.points[element.points.length - 1]) {
                  element.points[element.points.length - 1].isshow = true;
                } else {
                  ele.isshow = false;
                }
                url = ele.imagePath.replace("D:/share/denseWarn", "http://10.95.97.239:8080");
                ele.imagePath = url;
              });
            });
            this.baokelist.map((item) => {
              let cont = item.points[item.points.length - 1];
              urlcoent.push(cont);
            });

            this.urlimg = urlcoent;
          }
          my_chers.setOption(option, true);
        });

        setTimeout(() => {
          this.gettablelist();
        }, 4000);

        my_chers.setOption(option, true);
      }, 150000);
    },
  },

  beforeDestroy() {
    clearInterval(this.interequest);
  },
};
</script>
<style  scoped>
.imgwarin_cont {
  width: 100%;
}
.imgwragin_top {
  width: 100%;
  /* background: #ffffff; */
  display: flex;
  justify-content: space-between;
  /* border: 1px solid #000; */
  margin-top: 10px;
}
.imgwragin_top .imgwargin_table {
  width: 100%;
  background: #ffffff;
  /* display: flex; */
}

.imgwargin_hader {
  width: 100%;
  /* background: #ffffff; */
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
#my_nerwter {
  width: 79%;
  height: 500px;
  background: #ffffff;
  margin-top: 20px;
}
.hader_selete {
  width: 30%;
  /* border: 1px solid #000; */
  display: flex;
  /* justify-content: space-around; */
  margin-top: 10px;
}
.imgwargin_cont_img {
  width: 20%;
  /* border: 1px solid red; */
  /* background: #ffffff; */
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.imgwargin_cont_img div {
  width: 100%;
}
.imgwargin_cont_img div img {
  width: 100%;
  height: 500px;
}

.hader_table {
  width: 100%;
  border: 1px solid #000;
  background: #ffffff;
  margin-top: 20px;
}
</style>